<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="bannerCont" v-if="false">
				<image mode="widthFix" src="/static/img/bookBanner.png"></image>
			</view>
			<view class="formCont hasTop">
				<view class="formTitle" >
					<view>岗位信息</view>
					<!-- <view class="closeOpen" >{{openStep1?'收起':'展开'}}</view> -->
				</view>
				<view class="formMain">
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">岗位职务</view>
					    </view>
						<view class="inputOut">
							<view class="inputMask" @click="showPosition = true"></view>
							<input
							  v-model="formInfo.position_name"
							  placeholder="请选择发布的岗位职务"
							/>
						</view>
						<view
							@click="showPosition = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">岗位类型</view>
					    </view>
						<view class="inputOut">
							<view class="inputMask" @click="showPositionType = true"></view>
							<input
							  v-model="positionType"
							  placeholder="请选择岗位类型"
							/>
						</view>
						<view
							@click="showPositionType = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">薪资类型</view>
					    </view>
						<view class="inputOut">
							<view class="inputMask" @click="showMoneyType = true"></view>
							<input
							  v-model="moneyType"
							  placeholder="选择薪资类型"
							/>
						</view>
						<view
							@click="showMoneyType = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<view class="formItem moneyForm" v-if="moneyType=='自定义薪资范围'">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">薪资范围</view>
						</view>
						<view class="moneyInput">
							<input maxlength="6" type="number" v-model="formInfo.start_monry" placeholder="薪资(起)"  />
							<view class="money_"> ~ </view>
							<input maxlength="6" type="number" v-model="formInfo.end_monry" placeholder="薪资(止)"  />
						</view>
						<view class="moneyUntil" @click="showMoneyUnit = true">
							<view>{{moneyUnit}}</view>
							<view class="iconfont icon-xiala"></view>
						</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">招聘人数</view>
						</view>
						<view class="inputValue">
							<input maxlength="6" type="number" v-model="formInfo.zprs" placeholder="岗位需要招聘的人数"  />
						</view>
						<view>人</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="mustIcon">*</view>
						    <view class="inputNameText">联系电话</view>
					    </view>
						<view class="inputValue">
							<input maxlength="11" type="number" v-model="formInfo.position_contact_mobile" placeholder="请输入企业联系电话"  />
						</view>
						<view v-if="checkPhone(formInfo.position_contact_mobile)" class="iconfont icon-gouxuan1"></view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    <view class="inputNameText">换员港口</view>
					    </view>
						<view class="inputValue">
							<input maxlength="20" v-model="formInfo.hygk" placeholder="请输入换员港口"  />
						</view>
					</view>
					<view class="formItem">
						<view class="inputName">
						    
						    <view class="inputNameText">上船时间</view>
						</view>
						<view class="inputOut">
							<view class="inputMask" @click="showStartDate = true"></view>
							<input
							  v-model="formInfo.scsj"
							  placeholder="请选择上船时间"
							/>
						</view>
						<view
							@click="showStartDate = true"
							class="iconfont icon-xiala"
						></view>
					</view>
					<u-datetime-picker
						:show="showStartDate"
						v-model="defDate"
						:minDate="expMinDate"
						@cancel="showStartDate = false" 
						close="showStartDate = false"
						mode="year-month"
						@confirm="sureExpStartFn"
					></u-datetime-picker>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle">
					<view>岗位要求</view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="inputNameText">英语能力</view>
				    </view>
					<view class="inputOut">
						<view class="inputMask" @click="showEnglish = true"></view>
						<input
						  v-model="formInfo.yynl"
						  placeholder="请选择岗位的英语能力要求"
						/>
					</view>
					<view
						@click="showEnglish = true"
						class="iconfont icon-xiala"
					></view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="inputNameText">证书要求</view>
				    </view>
					<view class="inputOut">
						<view class="inputMask" @click="showZsdj = true"></view>
						<input
						  v-model="formInfo.zsdj"
						  placeholder="请选择岗位的证书要求"
						/>
					</view>
					<view
						@click="showZsdj = true"
						class="iconfont icon-xiala"
					></view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="inputNameText">年龄要求</view>
				    </view>
					<view class="inputValue">
						<input maxlength="20" v-model="formInfo.nlyq" placeholder="请输入年龄或年龄范围"  />
					</view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="inputNameText">工作经验</view>
				    </view>
					<view class="inputOut">
						<view class="inputMask" @click="showExp = true"></view>
						<input
						  v-model="formInfo.gzjy"
						  placeholder="请选择岗位的工作经验要求"
						/>
					</view>
					<view
						@click="showExp = true"
						class="iconfont icon-xiala"
					></view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="inputNameText">学历要求</view>
				    </view>
					<view class="inputOut">
						<view class="inputMask" @click="showEdu = true"></view>
						<input
						  v-model="formInfo.xlyq"
						  placeholder="请选择岗位的学历要求"
						/>
					</view>
					<view
						@click="showEdu = true"
						class="iconfont icon-xiala"
					></view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="inputNameText">名企背景</view>
				    </view>
					<view class="inputOut">
						<view class="inputMask" @click="showComBack = true"></view>
						<input
						  v-model="comBack"
						  placeholder="请选择岗位的名企背景"
						/>
					</view>
					<view
						@click="showComBack = true"
						class="iconfont icon-xiala"
					></view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="inputNameText">国籍要求</view>
				    </view>
					<view class="inputValue">
						<input maxlength="20" v-model="formInfo.gjyq" placeholder="请输入此岗位要求的国籍"  />
					</view>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle">船舶信息</view>
				
				<view class="formItem">
					<view class="inputName">
					    <view class="inputNameText">船舶航线</view>
				    </view>
					<view class="inputOut">
						<view class="inputMask" @click="showBootLine = true"></view>
						<input
						  v-model="formInfo.watercraft_area"
						  placeholder="请选择岗位的船舶航线"
						/>
					</view>
					<view
						@click="showBootLine = true"
						class="iconfont icon-xiala"
					></view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="inputNameText">船舶类型</view>
				    </view>
					<view class="inputOut">
						<view class="inputMask" @click="showBootType = true"></view>
						<input
						  v-model="formInfo.watercraft_type"
						  placeholder="请选择岗位的船舶类型"
						/>
					</view>
					<view
						@click="showBootType = true"
						class="iconfont icon-xiala"
					></view>
				</view>
				<view class="formItem moneyForm">
					<view class="inputName">
					    <view class="inputNameText">船舶载重量</view>
					</view>
					<view class="moneyInput flex_pull">
						<input maxlength="10" type="number" v-model="formInfo.watercraft_num" placeholder="请输入船舶船舶载重量"  />
					</view>
					<view class="moneyUntil" @click="showBootUnit = true">
						<view>{{formInfo.watercraft_dw}}</view>
						<view class="iconfont icon-xiala"></view>
					</view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    
					    <view class="inputNameText">造船时间</view>
					</view>
					<view class="inputOut">
						<view class="inputMask" @click="showCreateBoot = true"></view>
						<input
						  v-model="formInfo.watercraft_zcsj"
						  placeholder="请选择造船时间"
						/>
					</view>
					<view
						@click="showCreateBoot = true"
						class="iconfont icon-xiala"
					></view>
				</view>
				<u-datetime-picker
					:show="showCreateBoot"
					v-model="zc_defDate"
					:maxDate="expMinDate"
					@cancel="showCreateBoot = false" 
					close="showCreateBoot = false"
					mode="year-month"
					@confirm="sureCreateBootFn"
				></u-datetime-picker>
				<view class="formItem">
					<view class="inputName">
					    <view class="inputNameText">船旗</view>
				    </view>
					<view class="inputValue">
						<input maxlength="20" v-model="formInfo.watercraft_colors" placeholder="请输入船旗"  />
					</view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="inputNameText">船舶名称</view>
				    </view>
					<view class="inputValue">
						<input maxlength="20" v-model="formInfo.watercraft_name" placeholder="此岗位的船舶名称"  />
					</view>
				</view>
				<view class="formTip">船舶名称用于企业标注，不曝光在岗位详情，请放心填写。</view>
			</view>
			<view class="formCont">
				<view class="formTitle">
					<view>岗位福利</view>
				</view>
				<view class="tagsCont">
					<view @click="tagsFn(item)" :class="activeTags.includes(item.name)?'tagsItem tagsActive':'tagsItem'" :key="index" v-for="(item,index) in gwflArr">{{item.name}}</view>
				</view>
			</view>
			<view class="formCont">
				<view class="formTitle">岗位备注</view>
				<view class="formItem" style="padding: 0;">
					<textarea style="min-height: 100rpx;" v-model="formInfo.gwms" placeholder="请输入岗位备注或详细描述" ></textarea>
				</view>
			</view>
			<view class="bookAddBtn" @click="saveFn">保存信息</view>
		</view>
		<u-notify ref="uNotify"></u-notify>
		<u-toast ref="uToast"></u-toast>
		<load v-if="!showCont"></load>
		<subLoad v-if="showSub"></subLoad>
		<u-picker :show="showPosition" @confirm="positionSureFn" @cancel="showPosition = false" @close="showPosition = false" :closeOnClickOverlay="true" :columns="positionArr"></u-picker>
		<u-picker :show="showPositionType" @confirm="positionTypeSureFn" @cancel="showPositionType = false" @close="showPositionType = false" :closeOnClickOverlay="true" :columns="positionTypeArr"></u-picker>
		<u-picker :show="showMoneyType" @confirm="moneyTypeSureFn" @cancel="showMoneyType = false" @close="showMoneyType = false" :closeOnClickOverlay="true" :columns="moneyTypeArr"></u-picker>
		<u-picker :show="showMoneyUnit" @confirm="moneyUnitSureFn" @cancel="showMoneyUnit = false" @close="showMoneyUnit = false" :closeOnClickOverlay="true" :columns="moneyUnitArr"></u-picker>
		<u-picker :show="showComBack" @confirm="comBackSureFn" @cancel="showComBack = false" @close="showComBack = false" :closeOnClickOverlay="true" :columns="comBackArr"></u-picker>
		<u-picker :show="showEdu" @confirm="eduSureFn" @cancel="showEdu = false" @close="showEdu = false" :closeOnClickOverlay="true" :columns="eduArr"></u-picker>
		<u-picker :show="showZsdj" @confirm="zsdjSureFn" @cancel="showZsdj = false" @close="showZsdj = false" :closeOnClickOverlay="true" :columns="zsdjArr"></u-picker>
		<u-picker :show="showEnglish" @confirm="englishSureFn" @cancel="showEnglish = false" @close="showEnglish = false" :closeOnClickOverlay="true" :columns="englishArr"></u-picker>
		<u-picker :show="showExp" @confirm="expSureFn" @cancel="showExp = false" @close="showExp = false" :closeOnClickOverlay="true" :columns="expArr"></u-picker>
		<u-picker :show="showBootType" @confirm="bootTypeSureFn" @cancel="showBootType = false" @close="showBootType = false" :closeOnClickOverlay="true" :columns="bootTypeArr"></u-picker>
		<u-picker :show="showBootLine" @confirm="bootLineSureFn" @cancel="showBootLine = false" @close="showBootLine = false" :closeOnClickOverlay="true" :columns="bootLineArr"></u-picker>
		<u-picker :show="showBootUnit" @confirm="bootUnitSureFn" @cancel="showBootUnit = false" @close="showBootUnit = false" :closeOnClickOverlay="true" :columns="bootUnitArr"></u-picker>
		
		<u-modal :show="showModal" :cancelText="cancelText" :confirmText="confirmText" :showCancelButton="true" @cancel="cancelFn" :title="modalTitle" @confirm="modalSure"  :content='modalCont'></u-modal>
	</view>
</template>

<script>
	import getCate from '@/utils/getCate.js'
	import ruleCheck from '@/utils/ruleCheck.js'
	import load from '@/components/load.vue'
	import subLoad from '@/components/sub.vue'
	import api from '@/http/api.js'
	export default {
		components:{load,subLoad},
		data() {
			return {
				showSub:false,
				showCont:false,
				detailId:'',
				showModal:false,
				modalType:1,//1为发布提示，2为成功提示
				modalTitle:'发布提示',
				modalCont:'确认信息无误并发布此岗位？',
				confirmText:'确认发布',
				cancelText:'取消',
				showPosition:false,
				showMoneyUnit:false,
				showMoneyType:false,
				showPositionType:false,
				showStartDate:false,
				showComBack:false,
				showEdu:false,
				showZsdj:false,
				showEnglish:false,
				showExp:false,
				showBootType:false,
				showBootLine:false,
				showBootUnit:false,
				showCreateBoot:false,
				expMinDate:Number(new Date()),
				zc_defDate:Number(new Date()),
				defDate: Number(new Date()),
				positionArr:[],
				activeTags:[],
				moneyTypeArr:[
					['薪资面议','自定义薪资范围']
				],
				moneyUnitArr:[
					['元','美元']
				],
				positionTypeArr:[
					['普通岗位','急聘岗位']
				],
				comBackArr:[
					['国企','知名企业','名企背景不限']
				],
				eduArr:[
					['高中及以上','专科及以上','本科及以上','研究生及以上','学历不限']
				],
				zsdjArr:[
					['甲一','甲二','丙一','丙二','证书不限']
				],
				englishArr:[
					['能正常沟通','非常流畅','能力不限']
				],
				expArr:[
					['1-3年经验','3-5年经验','5-10年经验','10年以上经验','经验不限']
				],
				gwflArr:[],
				bootTypeArr:[],
				bootLineArr:[],
				bootUnitArr:[
					['吨','箱标','立方']
				],
				
				formInfo:{
					position_name:'',
					position_type:1,
					start_monry:'',
					end_monry:'',
					unit:1,
					gwfl:'',
					zprs:'',
					hygk:'',
					scsj:'',
					mqbj:3,
					xlyq:'学历不限',
					zsdj:'证书不限',
					gjyq:'',
					yynl:'能力不限',
					nlyq:'',
					gzjy:'经验不限',
					position_contact_mobile:'',
					gwms:'',
					watercraft_name: "",
					watercraft_colors: "",
					watercraft_hh: "",
					watercraft_imo: "",
					watercraft_num: "",
					watercraft_type: "",
					watercraft_area: "",
					watercraft_zcsj: "",
					watercraft_dw: "吨",
				},
				positionType:'普通岗位',
				moneyUnit:'元',
				moneyType:'薪资面议',
				comBack:'名企背景不限',
				sendMobile:'',
				
			};
		},
		methods:{
			cancelFn(){
				this.showModal = false
				if(this.modalType == 2){
					uni.navigateBack({
						delta: 1
					});
				}
			},
			modalSure(){
				if(this.modalType==1){
					this.showSub = true
					this.showModal = false
					this.sendMobile = this.formInfo.position_contact_mobile
					this.formInfo.gwfl = this.activeTags.join(',')
					let queryData = {...this.formInfo}
					if(queryData.watercraft_zcsj.indexOf('-')){
						queryData.watercraft_zcsj = queryData.watercraft_zcsj.split('-')[0]
					}
					let url = ''
					if(this.moneyType=='薪资面议'){
						queryData.end_monry = ''
						queryData.start_monry = ''
					}
					if(!this.detailId){
						url = '/api/Crew/positionAdd'
						queryData['enterprise_position_id'] =this.detailId
					}else{
						url = '/api/My/editPosition'
					}
					api.getRequst(queryData,url).then((res)=>{
						if(res.code==1){
							this.modalType = 2
							this.modalCont = '岗位发布成功，是否继续发布？'
							this.modalTitle = '成功提示'
							this.confirmText = '继续发布'
							this.cancelText= '返回列表'
							this.showModal = true
						}
						this.showSub = false
					})
				}else if(this.modalType==2){
					this.showModal = false
					this.formInfo = {
						position_name:'',
						position_type:1,
						start_monry:'',
						end_monry:'',
						unit:1,
						gwfl:'',
						zprs:'',
						hygk:'',
						scsj:'',
						mqbj:3,
						xlyq:'学历不限',
						zsdj:'证书不限',
						gjyq:'',
						yynl:'能力不限',
						nlyq:'',
						gzjy:'经验不限',
						position_contact_mobile:this.sendMobile,
						gwms:'',
						watercraft_name: "",
						watercraft_colors: "",
						watercraft_hh: "",
						watercraft_imo: "",
						watercraft_num: "",
						watercraft_type: "",
						watercraft_area: "",
						watercraft_zcsj: "",
						watercraft_dw: "吨",
					}
				}
				
			},
			checkMoney(data){
				if(this.moneyType=='薪资面议'){
					return false
				}else{
					let result = ruleCheck.checkMoney(
					  data.start_monry,
					  data.end_monry
					);
					return result
				}
			},
			saveFn(){
				let data = this.formInfo
				let tipData = {
					bgColor: '#e47470',
					message: '',
				}
				if(!data.position_name){
					tipData.message = '岗位职务不能为空'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(data.zprs==''||data.zprs<1){
					tipData.message = '招聘人数不能低于1人'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!/^\d+$/.test(data.zprs)){
					tipData.message = '招聘人数需为纯整数'
					this.$refs.uNotify.show(tipData)
					return false
				} else if(this.checkMoney(data)){
					tipData.message = this.checkMoney(data)
					this.$refs.uNotify.show(tipData)
					return false
				}else if(ruleCheck.checkPhone(data.position_contact_mobile)){
					tipData.message = ruleCheck.checkPhone(data.position_contact_mobile)
					this.$refs.uNotify.show(tipData)
					return false
				}
				this.modalType = 1
				this.modalCont = '确认信息无误并发布此岗位？'
				this.modalTitle = '发布提示'
				this.confirmText ='确认发布'
				this.cancelText= '取消'
				this.showModal = true
			},
			checkPhone(){
				return !ruleCheck.checkPhone(this.formInfo.position_contact_mobile)
			},
			getMonth(number){
				let time = new Date(number)
				const y = time.getFullYear();
				const m = time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
				const str = `${y}-${m}`;
				return str;
			},
			sureExpStartFn(e){
				this.formInfo.scsj = this.getMonth(e.value)
				this.showStartDate = false
			},
			sureCreateBootFn(e){
				this.formInfo.watercraft_zcsj = this.getMonth(e.value)
				this.showCreateBoot = false
			},
			tagsFn(item){
				if(this.activeTags.includes(item.name)){
					this.activeTags.splice(this.activeTags.indexOf(item.name),1)
				}else{
					this.activeTags.push(item.name)
				}
			},
			positionSureFn(data){
				this.formInfo.position_name = data.value[0]
				this.showPosition = false
			},
			comBackSureFn(data){
				let value = data.value[0]
				if(value=='国企'){
					this.formInfo.mqbj = 1
				}else if(value=='知名企业'){
					this.formInfo.mqbj = 2
				}else if(value=='名企背景不限'){
					this.formInfo.mqbj = 3
				}
				this.comBack = data.value[0]
				this.showComBack = false
			},
			eduSureFn(data){
				this.formInfo.xlyq = data.value[0]
				this.showEdu = false
			},
			bootTypeSureFn(data){
				this.formInfo.watercraft_type = data.value[0]
				this.showBootType = false
			},
			bootLineSureFn(data){
				this.formInfo.watercraft_area = data.value[0]
				this.showBootLine = false
			},
			bootUnitSureFn(data){
				this.formInfo.watercraft_dw = data.value[0]
				this.showBootUnit = false
			},
			zsdjSureFn(data){
				this.formInfo.zsdj = data.value[0]
				this.showZsdj = false
			},
			englishSureFn(data){
				this.formInfo.yynl = data.value[0]
				this.showEnglish = false
			},
			expSureFn(data){
				this.formInfo.gzjy = data.value[0]
				this.showExp = false
			},
			positionTypeSureFn(data){
				
				this.formInfo.position_type = data.value[0]=='普通岗位'?1:2
				this.positionType = data.value[0]
				this.showPositionType = false
			},
			moneyTypeSureFn(data){
				this.moneyType = data.value[0]
				this.showMoneyType = false
			},
			moneyUnitSureFn(data){
				this.formInfo.unit = data.value[0]=='元'?1:2
				this.moneyUnit = data.value[0]
				this.showMoneyUnit = false
			},
			getData(){
				let data = {
					enterprise_position_id:this.detailId,
				}
				api.getRequst(data,'/api/My/showPosition').then((res)=>{
					if(res.code==1){
						let resData = res.data
						if(resData.start_monry!='0'){
							this.moneyType = '自定义薪资范围'
						}
						this.positionType =resData.position_type==1? '普通岗位':'急聘岗位'
						this.activeTags = resData.gwfl.split(',')
						this.formInfo = res.data
					}
					this.showCont = true
				})
			},
		},
		async onLoad(option) {
			this.gwflArr =  await getCate.getCateFn(11)
			if(option.id){
				this.detailId = option.id
				this.getData()
			}else{
				this.formInfo.position_contact_mobile = option.moblie
				this.sendMobile = option.moblie
				this.showCont = true
			}
			let _positionArr = await getCate.getCateFn(3)
			this.positionArr = [_positionArr.map((item)=>item.name)]
			let _bootTypeArr = await getCate.getCateFn(1)
			this.bootTypeArr = [_bootTypeArr.map((item)=>item.name)]
			let _bootLineArr = await getCate.getCateFn(2)
			this.bootLineArr = [_bootLineArr.map((item)=>item.name)]
		}
	}
</script>

<style lang="less">
.showCont{
	min-height: 100vh;
	background-color: #f8f8f8;
	box-sizing: border-box;
	padding-bottom: 30rpx;
	.bannerCont{
		padding-top: 40rpx;
		background-image: linear-gradient(to bottom,#3f55cc,#f8f8f8);
		image{
			width: 100%;
		}
	}
	.formCont{
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx 30rpx 30rpx;
		width: 92%;
		margin: 30rpx auto 30rpx;
		box-sizing: border-box;
		.formTitle{
			font-size: 32rpx;
			
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.titleTip{
				font-size: 24rpx;
				font-weight: normal;
				color: #666;
			}
			.closeOpen{
				color: #3f55cc;
				font-size: 24rpx;
				font-weight: normal;
			}
		}
		.tagsCont{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
			.tagsItem{
				padding: 10rpx 24rpx;
				border-radius: 6rpx;
				background-color:#f8f8f8;
				color: #999;
				font-size: 22rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
			.tagsActive{
				background-color: #3f55cc;
				color: #fff;
			}
		}
		.formMain{
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}
		.formItem{
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			background-color: #f8f8f8;
			padding: 25rpx 50rpx;
			box-sizing: border-box;
			border-radius: 50rpx;
			.inputName {
			  width: 150rpx;
			  position: relative;
			  font-size: 28rpx;
			  .mustIcon {
				font-size: 28rpx;
				top: 0;
				left: -16rpx;
				position: absolute;
				color: #ff5757;
			  }
			}
			
			.inputOut {
				flex: 1;
				width: 3rem;
				position: relative;
				.inputMask {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
				  }
				  input{
					width: 100%;
					border: none;
					background: none;
					outline: none;
					position: relative;
					z-index: 1;
					font-size: 28rpx;
				  }
			}
			.inputValue{
				flex: 1;
				width: 100rpx;
			}
			.icon-xiala{
				color: #999;
			}
			.icon-gouxuan1{
				color: #3f55cc;
			}
		}
		.formTip{
			color: #999;
			text-align: center;
			margin-top: 15rpx;
			font-size: 20rpx;
		}
		.moneyForm{
			input{
				width: 150rpx;
			}
			.money_{
				width: 30rpx;
				// text-align: center;
			}
			.moneyInput{
				flex: 1;
				width: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.flex_pull{
				flex: 1;
				input{
					width: 100%;
				}
			}
			.moneyUntil{
				display: flex;
				width: 90rpx;
				justify-content: flex-end;
				align-items: center;
			}
		}
	}
	.bookAddBtn{
		width: 92%;
		border-radius: 50rpx;
		background-image: linear-gradient(to right bottom,#89afff,#3f55cc);
		color: #fff;
		font-size: 24rpx;
		padding: 30rpx 0;
		text-align: center;
		z-index: 2;
		margin: 40rpx auto 0;
		
	}
	.hasTop{
		// margin-top: -20rpx;
	}
}
</style>
